<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTMLDataSet using a table with colspan and rowspan</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.product {
	cursor: pointer;
}
.hover {
	background-color: #FFFFCC;
}
.selected {
	background-color: #CCCCCC;
}
</style>
<script src="../../includes/SpryData.js" type="text/javascript"></script>
<script src="../../includes/SpryHTMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//
// Create a HTMLDataSet that loads its data from a table with id="productsTable" located in the current file
// The DataSet will use the cells from the first row of data as the headers for the data columns
//
var ds1 = new Spry.Data.HTMLDataSet(null, "sampleTable", {hideDataSourceElement:false});
//-->
</script>
</head>
<body>
<h3>HTMLDataSet using a table with colspan and rowspan</h3>
<p> This page demonstrates how HTMLDataSet handles a table that uses colspan and rowspan.
  The value for the missing cells are taken from the originating cell that contains the colspan or rowspan attribute. </p>
<hr />
<p> Here's the constructor code for the DataSet used in the sample. </p>
<pre>
	var ds1 = new Spry.Data.HTMLDataSet(null, &quot;sampleTable&quot;, {hideDataSourceElement:false});
</pre>
<p> Table using spry references. Notice the repeat of cell values for the colspan and rowspan (B1, D1 and C2): </p>
<div spry:region="ds1">
  <table  border="1" cellspacing="0" cellpadding="10">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody spry:repeatchildren="ds1">
      <tr>
        <td>{A}</td>
        <td>{B}</td>
        <td>{C}</td>
        <td>{D}</td>
        <td>{E}</td>
      </tr>
    </tbody>
  </table>
</div>
<br/>
<!--  TABLE SOURCE -->
<p> Original source table. This is not hidden by the HTMLDataSet because optional parameter {hideDataSourceElement:false} is passed 
  to the constructor. </p>
<table id="sampleTable" border="1" cellspacing="0" cellpadding="10">
  <tr>
    <td><strong>A</strong></td>
    <td><strong>B</strong></td>
    <td><strong>C</strong></td>
    <td><strong>D</strong></td>
    <td><strong>E</strong></td>
  </tr>
  <tr>
    <td>A1</td>
    <td rowspan="2">B1</td>
    <td>C1</td>
    <td colspan="2">D1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td colspan="2" rowspan="2">C2</td>
    <td>E2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>B3</td>
    <td>E3</td>
  </tr>
</table>
</body>
</html>
